<template>
    <l-data-panel 
        :label="data.label"
        >
        <div @click="handleClick(1)" class="l-data-board l-rblock" style="float:left;width:33.333%" >
            <div class="l-data-board__icon theme3" >
                <i class="el-icon-s-check" ></i>
            </div>
            <div class="l-data-board__text" >
                <div class="l-data-board__num" ><l-count-up :end="nCompletedNum" ></l-count-up></div>
                <div class="l-data-board__title" >{{$t('待办任务')}}</div>
            </div>
        </div>
        <div @click="handleClick(2)" class="l-data-board l-rblock" style="float:left;width:33.333%" >
            <div class="l-data-board__icon theme2" >
                <i class="el-icon-s-custom" ></i>
            </div>
            <div class="l-data-board__text" >
                <div class="l-data-board__num" ><l-count-up :end="delegateNum" ></l-count-up></div>
                <div class="l-data-board__title" >{{$t('委托任务')}}</div>
            </div>
        </div>
        <div @click="handleClick(3)" class="l-data-board l-rblock" style="float:left;width:33.333%" >
            <div class="l-data-board__icon theme4" >
                <i class="el-icon-finished" ></i>
            </div>
            <div class="l-data-board__text" >
                <div class="l-data-board__num" ><l-count-up :end="completedNum" ></l-count-up></div>
                <div class="l-data-board__title" >{{$t('已办任务')}}</div>
            </div>
        </div>

    </l-data-panel>
</template>
<script>
import { mapGetters } from "vuex";
const api = window.$api.workflow.process
export default {
    props: ['data','isPreview'],
    data () {
        return {
            nCompletedNum:0,
            completedNum:0,
            delegateNum:0
        }
    },
    computed:{
        ...mapGetters(["modules"]),
    },
    mounted(){
        this.loadData()
    },
    methods:{
        async loadData(){
            const queryData = {
                rows:1,
                page:1,
                sidx:'F_CreateDate DESC'
            }
            // 加载代办任务
            const unCompletedData = await this.$awaitWraper(api.getUnCompletedMyPage(queryData))
            // 加载已办任务
            const completedData = await this.$awaitWraper(api.getCompletedMyPage(queryData))
            // 加载委托任务
            const delegateData = await this.$awaitWraper(api.getDelegateMyPage(queryData))

            this.nCompletedNum = unCompletedData.records
            this.completedNum = completedData.records
            this.delegateNum = delegateData.records

            //console.log(unCompletedData,completedData,delegateData)

        },
        handleClick(type){
            if(!this.isPreview){
                const module = this.modules.find(t=>t.f_EnCode == 'NWFProcess')
                if(module){
                    switch(type){
                        case 1: // 代办任务
                            this.$router.push({path:`${module.f_UrlAddress}?type=uncompleted`})
                            break;
                        case 2: // 委托任务
                            this.$router.push({path:`${module.f_UrlAddress}?type=delegate`})
                            break;
                        case 3: // 已办任务
                            this.$router.push({path:`${module.f_UrlAddress}?type=completed`})
                            break;
                    }
                    
                    //this.$router.$lrRouter.goto(module)
                }
            }
        }
    }
}
</script>

